<template>
	<w-container id='colection' :loading='loading' class="bg-color-pageBg">
		<w-navbar :placeholder="false" navType="goods" left-icon="arrow-left-back" :title='pageTitle' :bgColor="bgColor" :product="product">
		</w-navbar>
		<!-- 主图部分 -->
		<w-product-details-card :product='product'></w-product-details-card>



		<view  style="background-color: #1f1f1f;">
			<w-product-introduce :product='product'></w-product-introduce>
			<w-product-detail :product="product"></w-product-detail>
			
			<!-- 版权 -->
		</view>
		<!-- 创作者信息及品牌方信息 -->
		<w-product-builder :product='product'></w-product-builder>
		<!-- 商品信息 -->
		<!-- <w-product-info-list class='mt-12' :info='infoMap'></w-product-info-list> -->
		<!-- 商品介绍 -->
		<!-- <w-product-introduce class='mt-12' :product='product'></w-product-introduce> -->
		<!-- 购买须知 -->
		<w-product-buy-need class='mt-12' :product='product'></w-product-buy-need>
			<w-copyright></w-copyright>
		<shop-goods-action :info='info'/>
	</w-container>
</template>

<script>
	import {
		getGoodsInfo
	} from '@/api/shop/shop.js'
	import product from '@/mixins/product.js';
	// import productMixin from '@/mixins/product.js'
	import opacityMixin from '@/mixins/opacityNav.js'
	import ShopGoodsAction from '../components/shop-goods-action.vue'
	
	export default {
		mixins: [opacityMixin],
		components:{ShopGoodsAction},
		data() {
			return {
				loading: false,
				params:{
					goods_id: null,
					batch_id: null,
				},
				info:{
					product: {
						goods_type: 2,
						publisher: {},
						series: {},
						crystal:{}
					}
				}
			};
		},
		computed: {
			infoMap() {
				return {
					series_name: this.product.series?.name
				}
			},
			product(){
				return this.info.product;
			}
		},
		onLoad({id,collection_id,batch_id,origin,blind_box_id}) {
			this.params.goods_id = id;
			this.params.id=collection_id
			this.params.batch_id=batch_id
		},
		onShow() {
			this.getDetails();
		},
		onPullDownRefresh() {
			this.getDetails()
		},
		methods: {
			async getDetails() {
				this.loading = true
				try {
					let res = await getGoodsInfo(this.params)
					this.info = res.data;
					this.$set(this.info,'product',this.$tools.copyObj(this.info.data));
					this.info.product.goods_type=2;
					let {crystal_type,crystal_number,stock,main_image}=this.info
					this.info.product.crystal={
						crystal_type,
						crystal_price:crystal_number,
						stock
					}
					this.info.product.listimg=this.info.list_image;
					this.info.product.name=this.info.goods_name;
					this.info.product.main_image=main_image;
				} catch (e) {
					setTimeout(() => {
						this.backPage()
					}, 1500)
				} finally {
					uni.stopPullDownRefresh()
					this.loading = false;
				}
			},
			targetLike() {
				this.$set(this.product, 'is_like', !this.product.is_like)
			}
		}
	}
</script>
<style>
	page {
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	#colection {
		padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
	}
</style>
